import React, { useState,useEffect, useRef} from 'react'

import { BorderBox1,Charts } from '@jiaminghi/data-view-react'

import './TopContent.less'
import { useTranslation } from 'react-i18next'
const option = {
  legend: {
    data: [
      {
        name: '入库',
        color: '#00baff',
      },
      {
        name: '出库',
        color: '#ff5ca9',
      },
    ],
    bottom:20,
    itemWidth:80,
    itenHeight:60,
    textStyle: {
      fill: '#fff',
      fontSize:40
    },
  },
  grid:{
    left:120,
    right:200,
    bottom:120
  },
  xAxis: {
    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'],
    name:'倒数天数',
    nameTextStyle:{fontSize:40, color:'#fff'},
    axisLine: {
      style: {
        stroke: '#999',
      },
    },
    axisLabel: {
      style: {
        fill: '#999',
        fontSize:40
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    data: 'value',
    splitLine: {
      show: false,
    },
    name:'数量(个)',
    nameTextStyle:{fontSize:40, color:'#fff'},
    axisLine: {
      style: {
        stroke: '#999',
      },
    },
    axisLabel: {
      style: {
        fill: '#999',
        fontSize:40
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: '入库',
      data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
      type: 'bar',
      barStyle: {
        fill: 'rgba(0, 186, 255, 0.4)',
      },
    },
    {
      name: '出库',
      data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
      type: 'line',
      lineStyle: {
        stroke: '#ff5ca9',
      },
      linePoint: {
        radius: 4,
        style: {
          fill: '#ff5ca9',
          stroke: 'transparent',
        },
      },
    }
  ],
}

export default () => {
  const { t } = useTranslation()
  useEffect(()=>{
    option.series=[
      {
        name: '入库',
        data: [2, 3, 6, 6, 7, 6, 2, 4, 8, 9,2, 3, 6, 6, 7, 6, 2, 4, 8, 9,2, 3, 6, 6, 7, 6, 2, 4, 8, 9],
        type: 'bar',
        barStyle: {
          fill: 'rgba(0, 186, 255, 0.4)',
        },
      },
      {
        name: '出库',
        data: [5, 3, 6, 6, 7, 6, 2, 2, 3, 6,5, 3, 6, 6, 7, 6, 2, 2, 3, 6,2, 3, 6, 6, 7, 6, 2, 4, 8, 9],
        type: 'line',
        lineStyle: {
          stroke: '#ff5ca9',
        },
        linePoint: {
          radius: 4,
          style: {
            fill: '#ff5ca9',
            stroke: 'transparent',
          },
        },
      }
    ];
    option.xAxis.data=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
  },[])
  return (
    <div id="topContent-inboard">
      <BorderBox1>
        <div className="ranking-board-title">{t('近一个月出入库数据统计')}</div>
        <Charts option={option} />
      </BorderBox1>
    </div>
  )
}
